<template>
	<view>
		<view class="auth_item" v-for="(item1, index1) in authAfterList">
			<roleitem :cinfo="item1" :lvnum="1" @TogCheck="Toglv1Check" @Togopen="TogOpen(item1)">
			</roleitem>
			<view class="lv1_children" v-show="item1.isopen" v-if="(item1[childkey] && item1[childkey].length)">
				<rolerecursion :list="item1[childkey]" :lvnum="2" @toglvcheck="Toglv2Check"
					@togopen="(val)=>{val.isopen = !val.isopen}"></rolerecursion>
			</view>
		</view>
		<!-- <view class="step_area step_Audit">
			<view class="step_btn FlexRow  style2" style="background-color: #fd7400;
    color: #fff;
    height: 50px;
    font-size: 16px;
    border-radius: 20rpx;
    line-height: 50px;
	    text-align: center;" @click="save_auth">
				保存权限
			</view> -->
		</view>
	</view>
</template>

<script>
	import roleitem from "./roleitem.vue";
	import rolerecursion from "./rolerecursion.vue"
	export default {
		components: {
			roleitem,
			rolerecursion,
		},
		props: {
			// 初始权限菜单
			auth_list: {
				type: Array,
				defulat: () => {
					return []
				}
			},
			// 已勾选的权限  '1,2,3,4'
			auth_ids: {
				type: String,
				defulat: ''
			},
			// 权限下级访问 键值
			childkey: {
				type: String,
				defulat: 'sons'
			},
			// 权限 键值
			authkey: {
				type: String,
				defulat: 'auth_key'
			},
		},
		data() {
			return {
				// 处理之后的权限列表
				authAfterList: [],
				// 已勾选的权限数组
				auth_idArr: [],
			}
		},
		watch: {
			auth_list() {
				this.initialization()
			},
			auth_ids() {
				this.initialization()
			},
		},
		methods: {
			// 保存时 获取权限 字符串数组
			get_auth() {
				let resArr = this.keyRecursion(this.authAfterList, 1)
				return resArr;
			},
			save_auth() {
				let resArr = this.keyRecursion(this.authAfterList, 1)
				this.$emit('saveauth', resArr)
			},
			keyRecursion(list, lvnum) {
				let resArr = []
				for (let item of list) {
					let m_sons = item[this.childkey]
					if (m_sons && m_sons.length) {
						let arr = this.keyRecursion(m_sons, lvnum + 1)
						resArr.push(...arr)
					} else {
						let mkey = item[this.authkey]
						if (item.checked && mkey) {
							resArr.push(mkey)
						}
					}
				}
				return resArr
			},
			// 初始化展示列表
			initialization() {
				if (!this.auth_list.length) return
				if (this.auth_ids && typeof(this.auth_ids) == 'string') {
					this.auth_idArr = this.auth_ids.split(',') || []
				}
				let clist = JSON.parse(JSON.stringify(this.auth_list))
				for (let item1 of clist) {
					this.setkeys(item1)
				}
				this.authAfterList = clist
				this.judgeCheck()
				console.log(clist, 'clist')
			},
			// 设置展示列表的展开，勾选
			setkeys(obj) {
				console.log('obj', obj)
				this.$set(obj, 'checked', false) // 勾选
				this.$set(obj, 'isopen', false) // 展开子级
				// 这个是不是不是响应式的
				this.$set(obj, 'isindeter', false) // 未全选
				// obj.checked=false
				// obj.isopen=false
				// obj.isindeter=false
				let c_sons = obj[this.childkey]
				if (c_sons && c_sons.length) {
					for (let vals of c_sons) {
						this.setkeys(vals)
					}
				}
				let ckey = obj[this.authkey]
				if (this.auth_idArr.length && ckey) {
					let flag = this.auth_idArr.some(v => v == ckey)
					this.$set(obj, 'checked', flag) // 勾选
				}
			},
			judgeCheck() {
				for (let item1 of this.authAfterList) {
					this.setCheck(item1)
				}
				this.$forceUpdate()
			},
			setCheck(obj) {
				let c_sons = obj[this.childkey]
				if (c_sons && c_sons.length) {
					for (let vals of c_sons) {
						let v_sons = vals[this.childkey]
						if (v_sons) {
							let flag1 = v_sons.some(v => v.checked)
							let flag2 = v_sons.every(v => v.checked)
							if (flag1) {
								vals.isindeter = true
								vals.checked = false
								if (flag2) {
									vals.isindeter = false
									vals.checked = true
								}
							} else {
								vals.isindeter = false
								vals.checked = false
							}
						}
						this.setCheck(vals)
					}
					let flag3 = c_sons.some(v => v.checked)
					let flag4 = c_sons.every(v => v.checked)
					let flag5 = c_sons.some(v => v.isindeter)
					if (flag3 || flag5) {
						obj.isindeter = true
						obj.checked = false
						if (flag4) {
							obj.isindeter = false
							obj.checked = true
						}
					} else {
						obj.isindeter = false
						obj.checked = false
					}
				}
			},
			// 
			// 批量操作
			grantAll(flag) {
				for (let val1 of this.authAfterList) {
					val1.checked = flag
					this.TogCheck1(val1, flag)
				}
				let mag = flag ? '已授予所有权限' : '已取消所有权限'
				this.$alertTost(mag)
			},
			Toglv1Check(item1) {
				console.log(item1, '点击了')
				item1.isindeter = false
				item1.checked = !item1.checked
				let c_checked = item1.checked
				this.TogCheck1(item1, c_checked)
			},
			TogCheck1(obj, ischeck) {
				let c_sons = obj[this.childkey]
				if (c_sons && c_sons.length) {
					obj.isindeter = false
					for (let vals of c_sons) {
						vals.checked = ischeck
						this.TogCheck1(vals, ischeck)
					}
				}
			},
			Toglv2Check(item2) {
				console.log('点击了', item2)
				item2.checked = !item2.checked
				let ischeck = item2.checked
				this.TogCheck2(item2, ischeck)
				this.judgeCheck()
			},
			TogCheck2(obj, ischeck) {
				let c_sons = obj[this.childkey]
				if (c_sons && c_sons.length) {
					for (let vals of c_sons) {
						vals.checked = ischeck
						this.TogCheck2(vals, ischeck)
					}
				}
			},
			TogOpen(item1) {
				item1.isopen = !item1.isopen
				console.log('open')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.auth_item {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.lv1_children {
		border-radius: 0 0 10rpx 10rpx;
		border: solid 1px rgba(204, 204, 204, 1);
		border-top: 0;
		padding: 0 32rpx 0 26rpx;
	}
</style>